<template>
 
  <div class="box">
     <div class="noCart"  v-if="noCartState == true">
        <div class="img">
            <img src="/static/imgs_s07/s07_box.png" alt="显示错误" class="img1">
        </div>
        <div class="text1">
            <p>到底还过不过了！</p>
        </div>
        <div class="text2">
            <p>啥也不买，你不吃不喝不睡觉了呀</p>
        </div>
    </div>
    <!-- 购物车页面 -->
    <!-- 蒙版 -->

    <div class="cart" id="cart" v-if="noCartState == false">
      <div class="c">
        <div class="c1">
          <div @click="selectAll()">
            <img
              class="c1-imgs1"
              src="/static/imgs_s10/S_10order2.03.png"
              alt
              v-if="allChecked == true"
            />
            <img
              class="c1-imgs1"
              src="/static/imgs_s10/S_10order2.02.png"
              alt
              v-if="allChecked == false"
            />
            <!-- <input type="checkbox" class="ws-checkbox" v-model="allChecked" /> -->
          </div>

          <span class="c1-span1">全选</span>
          <span class="c1-span2">(已选{{cartList.length}}种)</span>
          <img class="c1-imgs2" src="/static/imgs_s10/S_10order2.01.png" alt />
          <span class="c1-span3" @click="deleteAll(cartList[0].member_id,cartList[0].shop_id)">清空购物车</span>
        </div>

        <div class="c2" v-for="(product,index) in cartList" :key="index" v-if="product.quantity!=0">
         
          <img
            class="c2-imgs1"
            @click="select(index)"
            src="/static/imgs_s10/S_10order2.03.png"
            alt
            v-if="product.state == true  "
          />
          <img
            class="c2-imgs1"
            @click="select(index)"
            src="/static/imgs_s10/S_10order2.02.png"
            alt
            v-if="product.state == false "
          />
          <!-- <div >
                <input type="checkbox" class="ws-checkbox" v-model="product.state"  name="all" />
          </div>-->

          <img class="c2-imgs2" :src="product.product_pic" alt />
          <div class="c2-div1">
            <span class="c2-span1">{{product.product_name}}</span>
            <br />
            <span class="c2-span2">¥{{product.price}}</span>
          </div>
          <div class="c2-div2">
            <span class="c2-div2-span1" @click="onDec(index)"></span>
            <span class="c2-div2-span2"></span>

            <span class="c2-div2-span3">{{product.quantity}}</span>
            <span class="c2-div2-span4" @click="onInc(index)"></span>
            <span class="c2-div2-span5"></span>
            <span class="c2-div2-span6"></span>
          </div>
          </div>
        
      </div>
      <div class="d">
        <span class="d-span1">合计：</span>
        <span class="d-span2">￥{{total}}</span>

        <span class="d-span3">结算</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartList: [], //购物车列表
      total: 0, //总价
      allChecked: false, //是否全选
      cartState: false, //是否打开购物车界面
      noCartState:false,
      displayMoney: false
    };
  },

  methods: {
    //打开购物车
    openCart() {
      console.log(this.cartState);
      if (this.cartState == false) {
        this.cartState = true;
        this.allChecked = false; //加载页面时默认取消全选
        this.total = 0; //加载页面时默认总价清零

        let url = "http://localhost:2221/cart/list?member_id=1&shop_id=1";
        wx.request({
          url, //开发者服务器接口地址",
          //data: 'data', //请求的参数",
          method: "GET",
          dataType: "json", //如果设为json，会尝试对返回的数据做一次 JSON.parse
          success: data => {
            if (data.statusCode == 200) {
              this.cartList = data.data.cartLists;
              //this.aggregate = data.data.aggregate;  后台传来的总价，暂时不用
              console.log(this.cartList);
            }
          },
          fail: err => {
            console.log(err);
          }
        });
      } else {
        this.cartState = false;
      }
    },
    closeCart() {
      this.cartState = false;
    },
    selectAll() {
      //全选
      if (this.allChecked == false) {
        for (var i = 0; i < this.cartList.length; i++) {
          var item = this.cartList[i];

          item.state = true;

          console.log(item.state);
        }
      } else {
        //取消全选
        for (var i = 0; i < this.cartList.length; i++) {
          var item = this.cartList[i];
          item.state = false;
          console.log(item.state);
        }
      }
      this.allChecked = !this.allChecked;

      console.log(this.allChecked);
      this.getTotalPrice();
    },
    //单选
    select(i) {
      this.allChecked = false;
      console.log(this.allChecked);

      if (this.cartList[i].state) {
        this.cartList[i].state = false;

        console.log(this.cartList[i].state);
      } else {
        this.cartList[i].state = true;
        console.log(this.cartList[i].state);
      }

      this.getTotalPrice();
    },

    //减号
    onDec(ind) {
      if (this.cartList[ind].quantity > 0) {
        this.cartList[ind].quantity--;
      } else {
        this.cartList[ind].quantity = 0;
      }
      this.getTotalPrice();
     this.subtractCart(this.cartList[ind]);
    },

    //计算总价
    getTotalPrice() {
      var cartList = this.cartList; // // 获取购物车列表
      var total = 0;
      for (var i = 0; i < cartList.length; i++) {
        if (cartList[i].state) {
          total += cartList[i].price * cartList[i].quantity;
          //console.log(total);
        }
      }

      this.total = total.toFixed(2);
    },

    //加号
    onInc(ind) {
      this.cartList[ind].quantity++;
      this.getTotalPrice();
      this.addCart(this.cartList[ind]);
    },

    //添加购物车
    addCart(cart) {
      console.log(cart);
      wx.request({
        url: "http://localhost:2221/cart/addCart", //开发者服务器接口地址",
        data: cart, //请求的参数",
        method: "Post",
        dataType: "json", //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: res => {
          console.log(res);
        },
        fail: () => {},
        complete: () => {}
      });
    },
    //减购物车数量
    subtractCart(cart) {
      console.log(cart);
      wx.request({
        url: "http://localhost:2221/cart/subtractCart", //开发者服务器接口地址",
        data: cart, //请求的参数",
        method: "Post",
        dataType: "json", //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: data => {
          this.getAll();
         
        },
        fail: () => {},
        complete: () => {}
      });
    },
    //清空购物车
    deleteAll(member_id, shop_id) {
      console.log(member_id, shop_id);
      wx.request({
        url:
          "http://localhost:2221/cart/deleteAll?member_id=" +
          member_id +
          "&shop_id=" +
          shop_id, //开发者服务器接口地址",
        // data: member_id,shop_id, //请求的参数",
        method: "Get",
        dataType: "json", //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: data => {
          if (data.statusCode == 200) {
             this.getAll();
            //this.aggregate = data.data.aggregate;  后台传来的总价，暂时不用
            console.log(this.cartList);
          }
        },
        fail: () => {},
        complete: () => {}
      });
    },
    getAll(){
      let url = "http://localhost:2221/cart/list?member_id=1&shop_id=1";
    wx.request({
      url, //开发者服务器接口地址",
      //data: 'data', //请求的参数",
      method: "GET",
      dataType: "json", //如果设为json，会尝试对返回的数据做一次 JSON.parse
      success: data => {
        if (data.statusCode == 200) {
          console.log(data.data);
          this.cartList = data.data.cartLists;
          if( this.cartList.length == 0 ){
              this.noCartState = true;
          }else{
              this.noCartState = false;
          }
          //this.aggregate = data.data.aggregate;  后台传来的总价，暂时不用
          console.log(this.cartList.length);
        }
      },
      fail: err => {
        console.log(err);
      }
    });
    }
  },

  created() {
    // let app = getApp()
  },
  onShow() {
    
    this.allChecked = false; //加载页面时默认取消全选
    this.total = 0; //加载页面时默认总价清零
    this.cartState = false; //加载页面时默认关闭购物车界面
    this.getAll();
    
  }
};
</script>


<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
  background: rgba(247, 247, 247, 1);
}

/* 购物车页面 */

.cart .c {
  position: absolute;
  left: 0;

  width: 375px;
  height: 404px;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px 6px 0px 0px;
  display: flex;
  flex-direction: column;
}
.checkbox {
  display: none;
}
.c2 .ws-checkbox,
.c1 .ws-checkbox {
  display: inline-block;
  margin-left: 8px;
  margin-top: 20px;
  width: 18px;
  height: 18px;
  /* background-image: url("/static/imgs_s10/S_10order2.02.png"); */
  background-size: 100%;
}
.c1 .ws-checkbox {
  display: inline-block;
  margin-left: 8px;
  margin-top: 3px;
  width: 18px;
  height: 18px;
  /* background-image: url("/static/imgs_s10/S_10order2.02.png"); */
  background-size: 100%;
}
/* .c2 .ws-checkbox [checked]{
 background-image: url(/static/imgs_s10/S_10order2.02.png);
} */

.c1 {
  /* position: absolute;
    left: 0;
    top: 0; */
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 375px;
  height: 44px;
}

.c1 .c1-imgs1 {
  margin-left: 13px;
  width: 18px;
  height: 18px;
}

.c1 .c1-span1 {
  margin-left: 15px;
  width: 25px;
  height: 11px;
  line-height: 11px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(37, 37, 37, 1);
}

.c1 .c1-span2 {
  margin-left: 8px;
  width: 70px;
  height: 12px;
  line-height: 12px;
  font-size: 11px;
  font-weight: 400;
  color: rgba(163, 165, 168, 1);
}

.c1 .c1-imgs2 {
  margin-left: 140px;
  width: 13px;
  height: 13px;
}

.c1 .c1-span3 {
  margin-left: 3px;
  width: 60px;
  height: 11px;
  line-height: 11px;
  font-size: 11px;
  font-weight: 100;
  color: rgba(163, 165, 168, 1);
}

.c2 {
  position: relative;
  margin-top: 21px;
  width: 375px;
  height: 69px;
  display: flex;
  flex-direction: row;
}

.c2 {
  margin-top: 7px;
}

/* 第一列图 */
.c2-imgs1 {
  margin-left: 13px;
  margin-top: 26px;
  width: 18px;
  height: 18px;
}

/* 食品图 */
.c2-imgs2 {
  margin-left: 17px;
  margin-top: 0px;
  width: 69px;
  height: 69px;
}

/* 图右字 */
.c2-div1 {
  margin-left: 8px;
  margin-top: 4px;
  width: 100px;
  height: 39px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.c2-span1 {
  margin-top: 4px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}

.c2-span2 {
  margin-top: 14px;
  font-size: 13px;
  font-weight: bold;
  color: rgba(232, 91, 77, 1);
}

/* 加减号 */
.c2-div2 {
  position: absolute;
  left: 294px;
  bottom: 0;
  width: 62px;
  height: 21px;
  top: 20px;
}

.c2-div2-span1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(218, 219, 222, 1);
  border-radius: 50%;
}

/* 减号的横 */
.c2-div2-span2 {
  position: absolute;
  left: 5px;
  top: 10px;
  width: 12px;
  height: 2px;
  background: rgba(176, 176, 176, 1);
  border-radius: 1px;
  z-index: 10;
}

.c2-div2-span3 {
  position: absolute;
  left: 28px;
  height: 5px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(44, 44, 47, 1);
  line-height: 20px;
}

/* 加号背景 */
.c2-div2-span4 {
  position: absolute;
  right: 0;
  top: 0;
  width: 21px;
  height: 21px;
  background: rgba(50, 177, 108, 1);
  border-radius: 50%;
}

/* 十字的竖 */
.c2-div2-span5 {
  position: absolute;
  left: 50px;
  bottom: 4px;
  width: 2px;
  height: 12px;
  background: rgba(255, 255, 255, 1);
  border-radius: 1px;
  z-index: 10;
}

/* 加号的横 */
.c2-div2-span6 {
  position: absolute;
  left: 45px;
  top: 10px;
  width: 12px;
  height: 2px;
  background: rgba(255, 255, 255, 1);
  border-radius: 1px;
  z-index: 10;
}

.d {
  position: absolute;
  left: 0;
  top: 490px;
  width: 375px;
  height: 45px;
  z-index: 20;
}

.d-span1 {
  position: absolute;
  left: 10px;
  top: 17px;
  font-size: 14px;
  width: 50px;
  height: 13px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 13px;
}

.d-span2 {
  position: absolute;
  left: 50px;
  top: 17px;
  width: 50px;
  height: 13px;
  line-height: 13px;
  font-size: 14px;
  color: #e85b4d;
}

.d-span3 {
  position: absolute;
  right: 0;
  top: 0;
  width: 127px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  background: rgba(50, 177, 108, 1);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

.noCart{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #F6F6F6;
        }
        .img1{
            width:142px ;
            height: 142px;
        }
        .img{
            width: 142px;
            height: 142px;
            margin-top: 121px;
        }
        .text1 p{
            font-size:15px;
            font-family:Source Han Sans CN;
            font-weight:500;
            color:rgba(66,66,66,1);
            margin-top: 19px;
        }
        .text2 p{
            font-size:12px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color:rgb(133, 124, 124);
            line-height:18px;
            opacity:0.7;
            margin-top: 14px;
            margin-bottom: 243px;
        }
</style>
